<script setup lang="ts">
import GroupBox from "./../components/group-box.vue";
import { ref, reactive, onMounted,computed,watch } from "vue";
import { Echart } from "@/components/Echart";
import {getAreaDisInfo,getAirportList,getHomeMonitor,getIndustryPort} from "@/api/home";
import { EChartsOption } from "echarts";
import { pieOptions,seriesData } from "./echarts-data";
import Player from "@/components/Player.vue";
//加载
const loading = ref(true);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption;

let screenWidth = ref(
  window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
);

let screenHeight = ref(
  window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
);
const industryList=ref([])
let screentype =ref('big')
let screenHS =ref('short')

  // 获取区域接口数据
  const getPieData=async()=>{
    const res =await getAreaDisInfo({})
    const realRes=res.data
    setTimeout(() => {
      loading.value = false;
    }, 500);
    
    // 转换 realRes 对象中的数据  
    const dealData = Object.entries(realRes).map(([name, value]) => {  
        return { value, name };  
    });  
      let sum=0
      dealData.map((item)=>{
     
        seriesData.forEach((item2)=>{
          if(item.name.includes(item2.name) ){
            item2.value=item.value
          }
        
        })
    
        sum+=item.value
       
      })
 
      pieOptionsData.title.subtext=sum
}
    const realMonitorList=ref([])
  // 接口调用获取机场列表数据
    const handleGetAirportList=async ()=>{
     
      const res=await getHomeMonitor()
      const airportList=res.data.airportInfoList;
      const droneList=res.data.droneList;
      realMonitorList.value=[...droneList]
      if(realMonitorList.value.length<4){
        realMonitorList.value=[...airportList]

      }
      realMonitorList.value.length>4&&realMonitorList.value.splice(0,4)
      if(realMonitorList.value.length<=4){
        const  num=4-realMonitorList.value.length
        for(let i=0;i<num;i++){
          realMonitorList.value.push({})
        }
      }

    }
    const handleGetIndustryPort=async ()=>{
      const res=await getIndustryPort()
      const industryPortList=res.data

      industryPortList.map((item)=>{
        if(item.businessType.includes('水利')){
          industryList.value[0]=item.airportCount
        }
        if(item.businessType.includes('交通')){
        
          industryList.value[1]=item.airportCount
        }
        if(item.businessType.includes('低空')){
          industryList.value[2]=item.airportCount
        }
      })
    }
onMounted(() => {
  // 获取区域接口数据
  getPieData()
  // 获取实时监控数据
  handleGetAirportList()
  // 获取行业机场统计
  handleGetIndustryPort()


  window.onresize = () => {
        screenWidth.value =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;

        screenHeight.value =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;


        getAll();
  };
});

watch(()=>screenWidth.value, (val) => {
  screentype.value = val>1660?'big':'small';
  screenHS.value = val>950?'height':'short';

});
// 用户来源
const getUserAccessSource = async () => {
  screentype.value = screenWidth.value>1800?'big':'small';
  screenHS.value = screenHeight.value>950?'height':'short';
  if( screentype.value ==='big'){
    pieOptionsData!.legend.itemGap= 21
     pieOptionsData!.legend.left= '55%'
      pieOptionsData!.legend.textStyle.fontSize= 12
      pieOptionsData!.title.textStyle.fontSize= 14
      pieOptionsData!.title.subtextStyle.fontSize= 20

  }else{
    pieOptionsData!.legend.itemGap= 20 
    pieOptionsData!.legend.left= '50%'
    pieOptionsData!.legend.textStyle.fontSize= 10 
    pieOptionsData!.title.textStyle.fontSize= 12
    pieOptionsData!.title.subtextStyle.fontSize= 14

  }
  if( screenHS.value==='height'){
    console.log('修改饼图位置')
    pieOptionsData!.series[0].center = ['27%', '50%']
    pieOptionsData!.series[1].center = ['27%', '50%']
    pieOptionsData!.title.left = '26%'


  }

};
const url1 =
  "https://vod.play.t-aaron.com/da1b1c30796d71eebfff7035d0b20102/e4c05858dbc94c20ba0ccf9464bd926d-fe8119f756e23f009b954affb89b754b-hd.mp4";
const getVideoAIOptions = (item,index) => {
  return {
    id: 'video' + index,
    width: "100%",
    height: "100%",
    source:item.cameraUrl?item.cameraUrl:item.externalMonitorUrl,
    isLive: false,
    hideControl: true, //是否隐藏播放器控制按钮
  };
};

const getAll = async () => {
  await getUserAccessSource();
  loading.value = false;
};

getAll();
</script>

<template>
  <div class="lf-con">
    <GroupBox :title="`区域分布统计`">
      <div
        class="con"
        v-loading="loading"
        element-loading-text="Loading..."
        :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(122, 122, 122, 0.8)"
      >
        <Echart :options="pieOptionsData" height="`100%`" width="100%" />
      </div>
    </GroupBox>
    <GroupBox :title="`各行业机场统计`">
      <div class="stats">
        <div class="stats_group one">
          <div class="hd">
            <h4>水利领域机场统计</h4>
            <span class="total">{{ industryList[0] }}台</span>
          </div>
          <div class="bd">
            <p class="quantity"></p>
          </div>
        </div>
        <div class="stats_group two">
          <div class="hd">
            <h4>交通领域机场统计</h4>
            <span class="total">{{industryList[1]}}台</span>
          </div>
          <div class="bd">
            <p class="quantity"></p>
          </div>
        </div>
        <div class="stats_group three">
          <div class="hd">
            <h4>低空网格化机场统计</h4>
            <span class="total">{{industryList[2]}} 台</span>
          </div>
          <div class="bd">
            <p class="quantity"></p>
          </div>
        </div>
      </div>
    </GroupBox>
    <GroupBox :title="`实时监控`">
      <div class="monitor_box">
        <div class="view" v-for="(item, index) in realMonitorList" :key="index">
          <Player
            ref="videoPlayer"
            :options="getVideoAIOptions(item,index)"
          />
          <!-- <Player
            ref="videoPlayer"
            :options="getVideoAIOptions('video' + index, index)"
          /> -->
        </div>
      </div>
    </GroupBox>
  </div>
</template>

<style lang="less" scoped>
.lf-con {
  // border: 1px solid blueviolet;
  width: 23%;
  max-width: 460px;
  min-width: 300px;
  .con {
    display: flex;
    flex: 1;
  }
  .stats {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    overflow: hidden;
    .stats_group {
      width: 100%;
      padding-left: 10px;
      .hd {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-left: 10px;
        // font-size: 1vw;
        font-size: 14px;
        color: #e5f5f6;
        &::before {
          content: "";
          position: absolute;
          height: 1px;
          width: 1px;
          border-left: 5px solid #fff;
          border-top: 5px solid #fff;
          left: -10px;
          top: 40%;
          z-index: 1;
        }
        .tit {
        }
      }
      .bd {
        height: 20px;
        background: #1e262c;
        border: 1px solid #3a454e;
        margin-top: 10px;
        padding: 5px 4px;
        .quantity {
          height: 8px;
          background: #5bafff;
          width: 80%;
        }
      }
      &.one {
        .total {
          color: #5bafff;
        }
        .quantity {
          background: #5bafff;
        }
      }
      &.two {
        .total {
          color: #d3b31c;
        }
        .quantity {
          background: #d3b31c;
        }
      }
      &.three {
        .total {
          color: #59d6f0;
        }
        .quantity {
          background: #59d6f0;
        }
      }
    }
  }
  .monitor_box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 5px 5px;
    .view {
      border: 1px solid #409eff;
    }
  }
}
</style>
